<template>
  <view class="flex justify-center items-center">
    <view class="flex items-center h-25 leading-25" @click="changeStatus">
      <view class="line-clamp-1">
        {{ searchType.value === -1 || !searchType.value ? defaultText : searchType.label }}
      </view>
      <uni-icons class="ml-5" type="down" size="14"></uni-icons>
    </view>
    <view v-show="showFilterList" class="absolute left-0 top-35 w-full max-h-[300px] overflow-y-auto z-20 bg-white">
      <view
        v-for="item in filterOptions"
        :key="item.value"
        class="flex items-center justify-between px-10 py-12 border-t border-solid border-[#efefef]"
        :class="searchType.value === item.value ? 'bg-blue-50 text-blue-500' : ''"
        @click="handleClick(item)"
      >
        <view>{{ item.label }}</view>
        <view v-if="searchType.value === item.value">
          <uni-icons type="checkmarkempty" color="#1e6af9" size="20" />
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, watch } from 'vue';

const props = defineProps({
  defaultIndex: {
    type: Number,
    default: 0,
  },
  defaultText: {
    type: String,
    default: '状态',
  },
  filterOptions: {
    type: Array,
    default: () => [{ label: '全部', value: -1 }],
  },
  queryKey: {
    type: String,
    default: 'status',
  },
});
const showFilterList = ref(false);
const searchType = ref(props.filterOptions[props.defaultIndex]);
const emit = defineEmits(['change', 'maskLayer']);
// 监听默认索引
watch(
  () => props.defaultIndex,
  newValue => {
    searchType.value = props.filterOptions[newValue];
  },
);
function handleClick(item) {
  searchType.value = { ...item };
  changeStatus();
  emit('change', {
    [props.queryKey]: searchType.value.value === -1 ? '' : searchType.value.value,
  });
}
function changeStatus() {
  if (showFilterList.value) {
    emit('maskLayer', false);
    closeFilter();
  } else {
    emit('maskLayer', true);
    openFilter();
  }
}
function openFilter() {
  showFilterList.value = true;
}
function closeFilter() {
  showFilterList.value = false;
}
defineExpose({
  openFilter,
  closeFilter,
});
</script>
